<template>
  <div class="mobile-conference-detail">
    <template v-if="loading">
      <div class="loading-container">
        <el-loading :full-screen="true" />
      </div>
    </template>
    
    <template v-else-if="error">
      <div class="error-container">
        <el-empty :description="error" />
      </div>
    </template>
    
    <template v-else>
      <div class="conference-header">
        <h2>{{ conference.title }}</h2>
        <el-tag :type="getStatusType(conference.status)">
          {{ getStatusText(conference.status) }}
        </el-tag>
      </div>

      <div class="info-section">
        <div class="info-item">
          <el-icon><Location /></el-icon>
          <span>{{ conference.location }}</span>
        </div>
        <div class="info-item">
          <el-icon><Timer /></el-icon>
          <span>开始时间：{{ formatDateTime(conference.startTime) }}</span>
        </div>
        <div class="info-item">
          <el-icon><Timer /></el-icon>
          <span>结束时间：{{ formatDateTime(conference.endTime) }}</span>
        </div>
      </div>

      <div v-if="conference.description" class="description-section">
        <h3>会议描述</h3>
        <p>{{ conference.description }}</p>
      </div>

      <div v-if="schedules.length" class="schedule-section">
        <h3>会议日程</h3>
        <el-timeline>
          <el-timeline-item
            v-for="schedule in schedules"
            :key="schedule.id"
            :timestamp="formatDateTime(schedule.startTime)"
            :type="getTimelineItemType(schedule)"
          >
            <h4>{{ schedule.title }}</h4>
            <p v-if="schedule.speaker">主讲人：{{ schedule.speaker }}</p>
            <p v-if="schedule.description">{{ schedule.description }}</p>
          </el-timeline-item>
        </el-timeline>
      </div>
    </template>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { Location, Timer } from '@element-plus/icons-vue'

export default {
  name: 'MobileConferenceDetail',
  components: {
    Location,
    Timer
  },
  setup() {
    const route = useRoute()
    const conference = ref({})
    const schedules = ref([])
    const loading = ref(true)
    const error = ref(null)

    const fetchData = async () => {
      try {
        loading.value = true
        error.value = null
        
        // 获取会议详情
        const conferenceResponse = await axios.get(`/api/conferences/${route.params.id}`)
        conference.value = conferenceResponse.data

        // 获取日程安排
        const schedulesResponse = await axios.get(`/api/conferences/${route.params.id}/schedules`)
        schedules.value = schedulesResponse.data
      } catch (err) {
        error.value = '获取会议信息失败'
        ElMessage.error('获取会议信息失败')
      } finally {
        loading.value = false
      }
    }

    const formatDateTime = (dateTime) => {
      return new Date(dateTime).toLocaleString()
    }

    const getStatusType = (status) => {
      const types = {
        0: 'info',
        1: 'success',
        2: 'warning'
      }
      return types[status] || 'info'
    }

    const getStatusText = (status) => {
      const texts = {
        0: '未发布',
        1: '已发布',
        2: '已结束'
      }
      return texts[status] || '未知'
    }

    const getTimelineItemType = (schedule) => {
      // Implement the logic to determine the type of timeline item based on the schedule
      return 'success'
    }

    onMounted(() => {
      fetchData()
    })

    return {
      conference,
      schedules,
      loading,
      error,
      formatDateTime,
      getStatusType,
      getStatusText,
      getTimelineItemType
    }
  }
}
</script>

<style scoped>
.mobile-conference-detail {
  padding: 16px;
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  background: #f5f7fa;
}

.conference-header {
  background: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.conference-header h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.info-section {
  background: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #606266;
}

.info-item .el-icon {
  margin-right: 8px;
  color: #409EFF;
}

.description-section, .schedule-section {
  background: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.description-section h3 {
  font-size: 16px;
  color: #303133;
  margin-bottom: 12px;
}

.schedule-section h3 {
  font-size: 16px;
  color: #303133;
  margin-bottom: 16px;
}

.loading-container, .error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
</style> 